<template>
  <zh-app ref="app">
    <zh-navbar :followTheme="true" :title="headerTitle" :shadow="0" hide-home>
      <template v-slot:left>
        <view class="flex flex-center flex-row">
          <navigator url="/pages/tabBar/home/settheme" class="px-12">
            <tm-icon :font-size="32" name="tmicon-cog-fill"></tm-icon>
          </navigator>
          <tm-icon @click="onChangeDark" :color="store.dark ? 'yellow' : ''" :font-size="32" name="tmicon-ios-sunny"></tm-icon>
        </view>
      </template>
    </zh-navbar>
    <zh-sheet :margin="[0, 0]" :followTheme="true">
      <view class="flex-row flex-row-center-start">
        <zh-image :width="108" :height="108" :src="logoimg"></zh-image>
        <view class="pl-16 flex-1" style="width: 0px">
          <zh-text _class="text-weight-b" :font-size="36" label="学在东阳"></zh-text>
          <zh-text _class="opacity-6" label="东阳教育,人人向往"></zh-text>
        </view>
      </view>
    </zh-sheet>
    <zh-sheet :margin="[0, 0]">
      <zh-input placeholder="搜索应用" :border="1" showClear prefix="tmicon-search" v-model="appSearchText" @search="appSearch" searchLabel="搜索"></zh-input>
    </zh-sheet>
    <zh-carousel autoplay dotPosition="bottom" align="right" :width="710" :round="3" :height="300" :list="bannerList"></zh-carousel>
    <view class="mt-10"></view>
    <zh-roll-notice :margin="[20, 10]" :followTheme="true" :round="3" :list="noticeList"></zh-roll-notice>
    <zh-grid :col="state.myCol" :margin="[20, 0]" title="自选应用">
      <zh-grid-item :linkItem="item" :height="140" v-for="item in myAppList" :key="item.menuId">
        <tm-icon :color="item.color" _class="pb-10" :font-size="46" :name="item.icon || item.iconImgUrl"></tm-icon>
        <zh-text :font-size="24" parentClass="text-align-center" _class="text-weight-b" :label="item.title"></zh-text>
      </zh-grid-item>
    </zh-grid>
    <zh-grid :col="state.systemCol" :margin="[20, 10]" v-for="item in systemAppList" :key="item.menuId" :title="item.title">
      <zh-grid-item :linkItem="childrenItem" :height="140" v-for="childrenItem in item.children" :key="childrenItem.menuId">
        <tm-icon :color="childrenItem.color" _class="pb-10" :font-size="46" :name="childrenItem.icon || childrenItem.iconImgUrl"></tm-icon>
        <zh-text :font-size="24" parentClass="text-align-center" _class="text-weight-b" :label="childrenItem.title"></zh-text>
      </zh-grid-item>
    </zh-grid>
  </zh-app>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import logoimg from '@/static/logo.png';
import systemConfig from '@/common/config';
//---------------------定义组件---------------------------------------------
const app = ref<any>(null);
//---------------------定义内部变量-------------------------------------------------
const bannerList = ref([]); //轮播图
const appSearchText = ref(''); //应用搜索
const headerTitle = ref(systemConfig.systemName); //导航栏标题
const store = $store.system;
const noticeList = ref([{ title: '学在东阳' }]); //状态公告
const myAppList = ref([]); //自选应用
const systemAppList = ref([]); //系统设置的应用
const state = reactive({ browserType: null, myCol: 5, myRow: 3, systemCol: 5, systemRow: 3 });

//---------------------定义调用方法---------------------------------------
const getBannerList = () => {
  //获取轮播图
  let params: any = {};
  params.bannerType = 'home';
  $api.common.send.post('banner0007', params).then((res) => {
    bannerList.value = res.result;
  });
};
const getNoticeList = () => {
  //获取系统状态通知
};
const getMyAppLst = () => {
  //获取自选应用
  let params: any = { useType: 'app', appId: systemConfig.appId };
  $api.common.send.post('userMenu0007', params).then((res: any) => {
    let result = res.result?.list || [];
    let list: any = [];
    if (result && result.length > 0) {
      let j = 1;
      result.forEach((item: any, index: number) => {
        if (j < state.myRow * state.myRow - 1) {
          if (isShowMenu(item.deviceType)) {
            j = j + 1;
            list.push(item);
          }
        }
      });
    }
    list.push({ title: '更多', icon: 'tmicon-all-fill', color: 'grey', linkType: 'router', linkPath: '/pages/tabBar/home/chooseMy', linkName: 'chooseMy' });
    myAppList.value = list;
  });
};
const getSystemAppLst = () => {
  //获取系统应用
  let params: any = { appId: systemConfig.appId, menuPro: 'person', menuType: 'common' };

  $api.common.send.post('appmenu0007', params).then((res: any) => {
    let result = res.result;
    let list: any = [];
    if (result && result.length > 0) {
      result.forEach((item: any) => {
        let childrenList: any = [];
        if (isShowMenu(item.deviceType) && item.children && item.children.length > 0) {
          let j = 1;
          item.children.forEach((itemChildren: any) => {
            if (j < state.systemCol * state.systemRow) {
              if (isShowMenu(itemChildren.deviceType)) {
                j = j + 1;
                childrenList.push(itemChildren);
              }
            }
          });
          let linkItem: any = { title: '全部', icon: 'tmicon-all-fill', color: 'grey', linkType: 'router', linkPath: '', linkName: '' };
          linkItem.menuId = item.menuId;
          linkItem.parentId == item.parentId;
          if (result.length >= state.systemCol * state.systemRow) {
            childrenList.push(linkItem);
          }
          item.children = childrenList;
          list.push(item);
        }
      });
    }
    systemAppList.value = list;
  });
};

const appSearch = () => {
  //点击应用搜索
  $router.push('/pages/tabBar/home/search', { searchText: appSearchText.value });
};
const onChangeDark = () => {
  //修改暗黑主题
  app.value?.setDark();
};
const setTheme = (colorname: string) => {
  //设置主题色
  app.value?.setTheme(colorname);
};
const isShowMenu = (deviceType: any) => {
  //是否显示
  let isShow = true;
  if (!deviceType) {
    return isShow;
  }
  let str = deviceType.toLowerCase();
  if (str.indexOf('all') != -1) {
    return isShow;
  }
  if (state.browserType) {
    if (str.indexOf(state.browserType) != -1) {
      isShow = true;
    } else {
      isShow = false;
    }
  }
  return isShow;
};
//---------------------初始化----------------------------------------------
onLoad((option) => {
  getBannerList();
  getMyAppLst();
  getSystemAppLst();
});
</script>

<style></style>
